<template>
    <ul style="">
        <Titlebar/>
        <li style="width: 100%;background-color: #ffffff;height: 60px;margin-bottom: 10px;" @click="Selected">
            <img class="Add_friends" src="../assets/6.png" >
            <p style="float: left;
                margin-left: 3%;
                margin-top: 5%;
                margin-bottom: 5%;">新的朋友
            </p>
        </li>
        <li v-for="list in $store.state.Friendslist"  style="width: 100%;background-color: #ffffff;height: 60px;float: left;" >
            <img style="width: 40px;
                height: 40px;
                border-radius: 3px;
                float: left;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 5px;
                padding-bottom: 5px;
                margin-left: 3%;
                margin-top: 1%;
                margin-bottom: 3%;" :src="list.uimg" >
            <p style="
                margin-left: 3%;
                margin-top: 5%;
                margin-bottom: 5%;">{{list.uname}}
            </p>
        </li>
    </ul>
</template>

<script>
import Titlebar from '../components/Titlebar.vue'

export default {
    name:'Search',
    components:{Titlebar},
    data() {
        return {
           
        }
    },
    methods:{
        Selected(){
            this.$router.push('/searchpage')
        }
    },
   
   
    
}
</script>


<style scoped>
.Add_friends{
    width: 30px;
    height: 30px;
    background-color: #F99F3E;
    border-radius: 3px;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 4%;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}

</style>
